<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { searchIP } from "@/api/search/shodan";
import { createMap, addMapMarker, setMapView } from "@/utils/map";

defineOptions({
  name: "SearchHost"
});

const loading = ref(false);

const resultVisiable = ref(false);
const tableData = ref([]);
const responseData = ref({
  country_code: "",
  country_name: "",
  region_code: "",
  area_code: "",
  asn: "",
  isp: "",
  latitude: "",
  longitude: "",
  org: "",
  city: "",
  ports: [],
  last_update: ""
});
const queryForm = reactive({
  host: "219.130.135.190"
});
let mapInstance;
onMounted(() => {
  mapInstance = createMap("map-container", {});
});

function onQuery() {
  resultVisiable.value = false;
  loading.value = true;
  searchIP(queryForm.host).then(resp => {
    console.log(resp);
    responseData.value = resp;
    resultVisiable.value = true;
    loading.value = false;
    addMapMarker(mapInstance, [
      parseFloat(responseData.value.latitude),
      parseFloat(responseData.value.longitude)
    ]);
    setMapView(mapInstance, [
      parseFloat(responseData.value.latitude),
      parseFloat(responseData.value.longitude)
    ]);
  });
}
</script>

<template>
  <div>
    <h1>主机信息查询</h1>
    <el-form :model="queryForm">
      <el-form-item>
        <el-input
          v-model="queryForm.host"
          placeholder="输入域名、IP地址一键查询"
        />
      </el-form-item>
      <el-button
        class="w-full mt-4"
        size="default"
        type="primary"
        :loading="loading"
        @click="onQuery()"
        >查询</el-button
      >
    </el-form>
    <el-divider />
    <div v-if="resultVisiable" class="result-container">
      <h3>查询结果</h3>
      <el-descriptions
        class="margin-top"
        :title="queryForm.host"
        :column="3"
        border
      >
        <el-descriptions-item>
          <template v-slot:label>
            <i class="el-icon-user" />
            国家地区
          </template>
          {{ responseData.country_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            <i class="el-icon-mobile-phone" />
            省市
          </template>
          {{
            responseData.country_code +
            " - " +
            responseData.region_code +
            " - " +
            responseData.city
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            <i class="el-icon-location-outline" />
            互联网服务提供商ISP
          </template>
          {{ responseData.isp }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            <i class="el-icon-tickets" />
            更新时间
          </template>
          {{ responseData.last_update }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            <i class="el-icon-office-building" />
            自治系统编号ASN
          </template>
          {{ responseData.asn }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            <i class="el-icon-office-building" />
            开放端口列表
          </template>
          <el-tag v-for="item in responseData.ports" :key="item">
            {{ item }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item>
          <template v-slot:label>
            <i class="el-icon-office-building" />
            所属组织
          </template>
          {{ responseData.org }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="tableData" style="width: 100%" v-if="false">
        <el-table-column prop="ip" label="IP" width="180" />

        <el-table-column prop="timestamp" label="日期" width="180" />

        <el-table-column prop="address" label="地址信息" />
      </el-table>

      <el-divider>参考位置</el-divider>
    </div>
    <div class="map-container" id="map-container" />
  </div>
</template>

<style scoped>
h1,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.result-container {
  padding: 5px 20px 10px;
  background-color: white;
}

.el-tag {
  margin: 0 5px;
}

.el-input__inner {
  height: 60px;
  line-height: 60px;
}

#map-container {
  width: 100%;
  height: 250px;
}
</style>
